<template>
  <div class="lyricsHeader">
    <div class="cont">
      <router-link :to="{ path: '/' }"
        ><img src="../../assets/img/logo.png" alt=""
      /></router-link>
      <div class="navList">
        <router-link :to="{ name: 'lyricsIndex' }" class="list"
          >歌词</router-link
        >
        <router-link :to="{ name: 'lyricsCollection' }" class="list"
          >歌词征集令</router-link
        >
        <router-link :to="{ name: 'singer' }" class="list"
          >优秀歌手</router-link
        >
        <router-link :to="{ name: 'organ',query:{organTypeId:3} }" class="list">演出机构</router-link>
      </div>
      <div class="btnRight">
        <!-- <router-link :to="{ name: 'creat' }" class="creation" >
          <i class="el-icon-plus"></i>
          我要征集
        </router-link> -->
        <div class="creation" @click="$router.push({name:'collection',query:{creationTypeId:3}})">
          <i class="el-icon-plus"></i>
          我要征集
        </div>
        <div
          v-if="!(userInfo.username || userInfo.userName)"
          class="resgin"
          @click="login"
        >
          <span>注册</span> <span class="bor"></span> <span>登录</span>
        </div>
        <div v-else>
          <el-dropdown>
            <span class="el-dropdown-link">
              <span class="el-dropdown-link">
                <span class="img">
                  <el-avatar :size="30" :src="userAvatar" fit="fill">
                    <img
                      src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                    />
                  </el-avatar>
                </span>
                {{ userInfo.username || userInfo.userName }}
              </span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  ><router-link :to="{ name: 'personalCenter' }"
                    >个人中心</router-link
                  ></el-dropdown-item
                >
                <el-dropdown-item @click="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <Login ref="login"></Login>
    <Author ref="author"></Author>
  </div>
</template>
<script>
import Login from "./login.vue";
import Author from "./author.vue";
import { Logout } from "@/api/UserInfo";
import { getUserInfo, removeUserInfo } from "@/utils/auth";
import baseConfig from "@/utils/config"
export default {
  components: {
    Login,
    Author,
  },
  data() {
    return {
      creation: false,
    };
  },
  watch: {
  },
  computed: {
    userAvatar(){
      return baseConfig.dev+this.$store.state.userInfo.userAvatar
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  created() {
    // this.$store.state.userInfo
    // debugger
    // if (getUserInfo()) {
    //   this.userInfo = JSON.parse(getUserInfo());
    // }
  },
  watch: {
    $route(to, form) {
      if (to.name == "creation" || to.name == "creat") {
        this.creation = true;
      } else {
        this.creation = false;
      }
    },
  },
  methods: {
    login() {
      this.$refs.login.dialogVisible = true;
    },
    logout() {
      this.userInfo = {};
      Logout().then((res) => {});
      removeUserInfo();
      this.$store.commit("setUser", {});
      this.$router.push({ path: "/" });
    },
    userToAuthor() {
      this.$refs.author.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.lyricsHeader {
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  .cont {
    width: 1002px;
    display: flex;
    align-items: center;
    .navList {
      margin-left: 20px;
      flex: 1;
      height: 50px;
      display: flex;
      align-items: center;
      .list {
        height: 50px;
        font-size: 14px;
        display: flex;
        align-items: center;
        color: #999;
        padding: 0 14px;
        position: relative;

        ::v-deep {
          .el-dropdown-link {
            height: 50px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #999;
            img {
              margin-left: 4px;
            }
          }
        }
      }
      a {
        text-decoration: none;
        color: #999;
        display: block;
        box-sizing: border-box;
        &.router-link-active {
          background: #fff;
          color: #2eb0c6;
          border: 1px solid #eeeeee;
          position: relative;
          box-sizing: border-box;
          &::before{
            width: 100%;
            display: block;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            background: #2eb0c6;
          }
        }
      }
    }
    .btnRight {
      display: flex;
      font-size: 14px;
      & > div {
        width: 88px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        box-sizing: border-box;
        .el-dropdown-link{
          display: flex;
          align-items: center;
          .img{
            padding-right: 10px;
          }
        }
        span {
          cursor: pointer;
        }
        &.author {
          border: 1px solid #2eb0c6;
          color: #2eb0c6;
          margin-right: 20px;
        }
        &.resgin {
          background: #2eb0c6;
          color: #fff;
          span.bor {
            width: 1px;
            background: #fff;
            height: 12px;
            display: block;
            margin: 0 4px;
          }
        }
      }

      .creation {
        border: 1px solid #2eb0c6;
        border-radius: 13px;
        width: 80px;
        height: 27px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2eb0c6;
        font-size: 12px;
        cursor: pointer;
        i {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>